@import 'common';
@import 'mixin';
.jw-artile-wrapper {
    .center; //   height: 500px;
    //   background:red;
    background: #f1f1f1;
    margin-top: 100px;
    float: left;
    .jw-artile-mun {
        .center;
        background: #f1f1f1;
        .jw-artile-mun-inner {
            .center;
            max-width: @jw-width;
            background: #f1f1f1;
            ul {
                margin: 0;
                padding: 0;
                border-bottom: 1px solid whitesmoke;
                .jw-artile-mun-list {
                    display: block;
                    width:110px;
                    float: left;
                    line-height: 50px;
                    cursor: pointer;
                    transition: all 0.9;
                    color: #333333;
                    position: relative;
                    text-align: center;
                    padding: 10px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    &:hover {
                        background: white;
                    }
                    a { width: 110px;
                        &:hover .fa-caret-down {
                            transform: rotate(180deg);
                            color: #333333;
                        }
                        i {
                            color: #666;
                            margin: 0 5px;
                        }
                    }
                    .smbmun {
                        //                             position: absolute;                         
                        background: white;
                        -moz-border-radius-bottomleft: 10px;
                        border-bottom-right-radius: 10px;
                        border-bottom-left-radius: 10px;
                        position: absolute;
                        z-index: 999;
                        li {
                            width: 100%;
                            float: none;
                            margin: 0 65px 0 0;
                            text-align: center;
                            &:hover {
                                background: #00c3b6;
                                color: white;
                            }
                            a {
                               
                                color: black;
                                &:hover {
                                    color: white;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .jw-artile-wrapper-inner {
        .center;
        background: #f1f1f1;
        margin: 0 auto;
        .jw-artile-container {
            .center;
            background: #f1f1f1;
            max-width: 1250px;
            margin-top: 20px;
            .jw-artile-wrapper-detaileds {
                .center;
                width: @width/1.38;
                max-width: 900px;
                background: white;
                float: left; //          &:hover{
                //               background: #f1f1f1;
                //          }
                //              .detailedbgcolor{
                //                   background: #F5F5F5;
                //              }
                .jw-artile-wrapper-detailed {
                    margin: 2px 0;
                    border-bottom: 1px solid #ededed;
                    background: white;
                    cursor: pointer;
                }
                .Tab-bar {
                    .center;
                    max-width: @jw-width;
                    text-align: center;
                    margin: 20px 0;
                    ul li {
                        display: inline;
                        list-style: none;
                        padding: 3px 10px;
                        border: 1px solid #ededed;
                        margin-left: 10px;
                        transition: all 0.5s;
                    }
                    ul li:first-child {
                        margin-left: 0;
                    }
                    .jw-input {
                        input {
                            display: inline-block;
                            width: @jw-width/20;
                        }
                    }
                    ul li:hover:not(.pager-diabled):not(.pager-ellipsis) {
                        background: #00b38a;
                        color: white;
                        border: 1px solid #00b38a;
                    }
                    .pager-diabled {
                        color: silver;
                        cursor: default;
                    }
                    .pager-active {
                        background: #00b38a;
                        color: white;
                        border: 1px solid #00b38a;
                    }
                    .pager-ellipsis {
                        border: none;
                    }
                }
                .jw-artile-wrapper-detailed:last-child {
                    border-bottom: none;
                }
                .jw-artile-wrapper-detailed-left {
                    width: 20%;
                    float: left;
                    //height: 135px;
                    img {
                        //
                        padding: 10px;
                    }
                }
                .jw-artile-wrapper-detailed-right {
                    width: 70%;
                    float: right;
                    position: relative;
                    .title {
                        h2 {
                            font-weight: normal;
                            line-height: 1.2;
                            a {
                                color: #999;
                                font-size: 12px;
                                &:hover {
                                    color: #00c3b6;
                                }
                            }
                        }
                    }
                    .wrapper {
                        margin-top: -20px;
                        .wrapper-top {
                            font-size: 12px;
                            line-height: 20px;
                            .web {
                                color: white;
                                display: inline-block;
                                padding: 1px 8px;
                                background: rgba(0,0,0,0.4);
                                transition: all 0.5s;
                                border-radius: 2px;
                                &:hover {
                                    background: rgba(0,0,0,1);
                                    color: white;
                                }
                            }
                            a {
                                color: #999;
                                &:hover {
                                    color: black;
                                }
                            }
                        }
                        .spread {
                            font-size: 12px;
                            line-height: 15px;
                            color: #999;
                            margin-top: 10px;
                            margin-right: 15px;
                        }
                        .announcer {
                           
                            color: #999;
                            font-size: 12px;
                            line-height: 20px;
                        }
                        .heart-num {
                            float: right;
                            margin-right: 20px;
                            i {
                                padding: 0 2px;
                            }
                            a {
                                color: #999;
                                &:hover {
                                    color: #00C3B6;
                                }
                            }
                        }
                    }
                    .author {
                        position: absolute;
                        top: 20px;
                        right: 30px;
                        a {
                            display: block;
                            width: 41px;
                            height: 41px;
                            border-radius: 100%;
                            img {
                                display: block;
                                width: 41px;
                                height: 41px;
                                border-radius: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
.sidebar {
    width: @width/3.67;
    max-width: @jw-width/3.67;
    float: right;
    .sidebar-header {
        width: 100%;
        line-height: 20px;
        background: #F1F1F1;
        margin-top: -19px;
        h3 {
            padding: 20px;
            background: #F9F9F9;
        }
        .sidebar-pic {
            width: 30%;
            float: left;
            img {
                display: inline-block;
            }
        }
        section {
            background: white;
            padding: 20px;
            &:hover {
                background: #F9F9F9;
            }
            .sidebar-pic-inner {
                width: 65%;
                float: right;
                a {
                    font-size: 12px;
                    color: #999;
                }
                div {
                    font-size: 12px;
                    line-height: 30px;
                    color: #ea4c89;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .sidebar-container {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        background: white;
        
        a {
            background: white;
            img {
                vertical-align: bottom;
                //padding: 20px;
                background: white;
            }
        }.sidebar-container-comment{
            
            margin-top: 20px;
        }
        .sidebar-container-comment-header {
            margin: 20px auto;
            background: #C0C0C0;
            padding: 10px;
            h3 {
                font-size: 12px;
                font-weight: normal;
                padding: 0 20px;
            }
        }
        .sidebar-container-comment-wrapper {
            background: white;
            li {
                padding: 10px;
                border-bottom: 1px solid gainsboro;
                .group {
                    float: left;
                    img {
                        display: inline-block;
                        width: 50px;
                        height: 50px;
                        border-radius: 100%;
                        padding: 10px;
                    }
                    p {
                        strong {
                            font-size: 12px;
                            font-weight: normal;
                        }
                    }
                    p:first-child {
                        color: #00C3B6;
                    }
                }
            }
        }
    }
    .sidebar-footer {
        width: 100%;
        margin: 20px 0;
        div {background: white;
             //padding: 20px;
             margin-top: 10px;
            a {
                background: white;
                img {
                  
                    background: white;
                }
            }
        }
    }
}
.jw-backtop {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 20px;
    display: none;
    a {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: rgba(0,0,0,0.75);
        text-align: center;
        transition: all 0.5;
        border-radius: 3px;
        cursor: pointer;
        &:hover {
            background: #00C3B6;
        }
        i {
            font-size: 14px;
            color: white;
            margin-top: 8px;
        }
    }
}